@import '~antd/es/style/themes/default.less';

.logincontainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background-size: contain;
  background: url('../../../assets/loginbg.jpg')  no-repeat center center;
  :global {
    .ant-input-affix-wrapper {
      background-color: #355fb8;
      border: 1px solid #126cbb;
    
    }
    // .ant-input-affix-wrapper:hover {
    //   background-color: #355fb8;
    //   border-color: #07a7ff;
    // }
    .ant-input,.ant-select{color: white;}
    .ant-alert-error {
      position: absolute;
      top: 350px;
    }
    .ant-select-arrow,.ant-input-password-icon {
      color: #16a0f4;
    }
  
}
.divselect{
    border: 0;
    display: flex;
    align-items: center;
    height: 66px;
    margin-bottom: 0;
    position: relative;
    .icon{
      position: absolute;
      z-index: 999;
      margin-left: 12px;
      top: 14px;
      color: #07a7ff;
      font-size: 14px;
    }
    :global{
      
      .ant-select-selector {
        padding: 0 28px!important;
     }
     .ant-form-item{
      width: 100%!important;
 
    }
     .ant-select-selector .ant-select-selection-placeholder {
      color:#07a7ff
     }
     
     .ant-select-selector {
      background-color: #355fb8;
      border: 1px solid #0e215a;
  
  }
    .ant-select-selector :hover {
    
      border-color: #07a7ff!important;
    }
    }
}


.content {
  flex: 1;
  width: 880px;
  height: 500px;
  margin: 160px auto 0;
}

.top {
  text-align: center;
}
.topImg{
  width:auto;
  height: 90px;
}

.companyname{
    margin-top: 16px;
    text-align: center;
   
    font-size: 16px;
    letter-spacing: 2px;
    a{
      color: #07a7e0;
    }
}



.main {

  background: url(~@/assets/loginformbg.png) no-repeat center top;
  background-size: 100% 100%;
  width: 630px;
  height: 490px;
  padding: 160px 140px 0;
  margin: 0 auto;
    .input{
     width:350px; 
    }

    input{
      &::placeholder{
        color:#07a7ff
      }
    }
    select{
      &::placeholder{
        color:#07a7ff
      }
    }
    .@{ant-prefix}-tabs-nav-list {
      margin: auto;
      font-size: 16px;
    }
    .ant-input-affix-wrapper {
      color: #07a7ff;
      background-color: #042552;
      border: 1px solid #0e215a;
  
    
  }
  // .ant-input-affix-wrapper:hover {
  
  //   border-color: #07a7ff;
  // }
  .ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant-input, 
  .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper,
   .ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover, 
   .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover {
    background-color: #042552;
    border-color: #ff4d4f;
}
  }

  .icon {
    margin-left: 16px;
    color: #07a7ff;
    font-size: 24px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: @primary-color;
    }
  }

  .other {
    margin-top: 24px;
    line-height: 22px;
    text-align: left;
    .register {
      float: right;
    }
  }

  .prefixIcon {
    color: #07a7ff!important;
    font-size: @font-size-base;
  }
}



@media screen and (max-width: @screen-sm) {

  .topImg{
    width: 100%!important;
    height: auto!important;
  }
.content {
  flex: 1;
  width: 100%!important;
  height: 100%!important;
  margin: 50px auto!important;
}

  .main{
    width: 100%!important;
    height: 380px!important;
    padding: 105px 70px 0!important;  
    .input{
      width:100%!important;
     }
  }
  :global{
    .ant-form-item{
     
      margin-bottom: 16px;
    }
}
 
}
